<script setup>
import {ref,inject,h} from 'vue'
import {ElMessage, ElMessageBox, ElCard, ElTooltip, ElInput} from 'element-plus'
import axios from 'axios'
import Vue3TagsInput from '@/components/Vue3TagsInput/Vue3TagsInput.vue'

//登录相关逻辑
const userinfo=inject("userinfo")

//获取所有待核实专家
const talent_audit_list=ref([])
axios.get('/api/talent_audit').then(res=>{
    talent_audit_list.value=res.data
}).catch(err=>{
    ElMessage.error("获取专家审核列表出错！")
    console.error(err)
})

//按钮
const message=ref('asdf')
function handlePass(item){
    message.value=`欢迎${item.user.name}加入平台专家库。`
    ElMessageBox({
        message:()=>h('div',{style:'display:flex; flex-direction:column; width:100%;'},[
            h('div',{style:'display:flex; align-items:center;'},[
                h('img',{src:'/img/通过.png', style:'width:30px; height:30px; margin-right:15px;'}),
                '确认通过',
                h('span',{style:'font-weight:bolder;text-decoration: underline;'},item.user.name),
                '的专家信息？'
            ]),
            h('div',{style:'display:flex; align-items:flex-start; width:100%; margin-top:10px;'},[
                h('span',{style:'width:45px;'},'留言：'),
                h(ElInput,{type: 'textarea', rows:'4', style:'width:320px;', modelValue:message.value, 'onUpdate:modelValue':(val)=>{message.value=val}})
            ])
        ]),
        customStyle:{width:'400px'},
        dangerouslyUseHTMLString:true,
        showCancelButton:true,
        confirmButtonText:'确定',
        cancelButtonText:'取消'
    }).then(()=>{
        axios.patch(
            `/api/talent_audit/pass/${item.id}/${userinfo.value.id}`,
            {message:message.value}
        ).then(ret=>{
            ElMessage("操作成功！")
            for(var i=0; i<talent_audit_list.value.length; i++)
            {
                if(talent_audit_list.value[i].id==item.id){
                    talent_audit_list.value.splice(i,1)
                    break
                }
            }
        }).catch(err=>{
            ElMessage.error("操作失败！")
            console.error(err)
        })
    }).catch(err=>{})
}

function handleReject(item){
    message.value=`对不起，无法通过您的专家申请。`
    ElMessageBox({
        message:()=>h('div',{style:'display:flex; flex-direction:column; width:100%;'},[
            h('div',{style:'display:flex; align-items:center;'},[
                h('img',{src:'/img/驳回.png', style:'width:30px; height:30px; margin-right:15px;'}),
                '确认驳回',
                h('span',{style:'font-weight:bolder;text-decoration: underline;'},item.user.name),
                '的专家信息？'
            ]),
            h('div',{style:'display:flex; align-items:flex-start; width:100%; margin-top:10px;'},[
                h('span',{style:'width:45px;'},'留言：'),
                h(ElInput,{type: 'textarea', rows:'4', style:'width:320px;', modelValue:message.value, 'onUpdate:modelValue':(val)=>{message.value=val}})
            ])
        ]),
        customStyle:{width:'400px'},
        dangerouslyUseHTMLString:true,
        showCancelButton:true,
        confirmButtonText:'确定',
        cancelButtonText:'取消'
    }).then(async ()=>{
        try{
            await axios.patch(
                `/api/talent_audit/reject/${item.id}/${userinfo.value.id}`,
                {message:message.value}
            )
            ElMessage("操作成功！")
            for(var i=0; i<talent_audit_list.value.length; i++)
            {
                if(talent_audit_list.value[i].id==item.id){
                    talent_audit_list.value.splice(i,1)
                    break
                }
            }
        }catch(err){
            ElMessage.error("操作失败！")
            console.error(err)
        }
    }).catch(err=>{})
}
</script>

<template>
<div class="container">
    <div v-if="talent_audit_list.length==0" class="no-content">
        无待审核专家
    </div>
    <el-card shadow="always" v-for="item in talent_audit_list" class="card">
        <div class="avatar-row">
            <el-image style="width:100px; height:130px;" :src="'/minio/talent-avatar/'+item.photo" fit="fill">
                <template #error>
                    <div class="avatar"></div>
                </template>
            </el-image>
            <div class="avatar-items">
                <div class="avatar-item">
                    <div class="avatar-item-title">姓名</div>
                    <div class="avatar-item-content">
                        <el-tooltip
                            placement="bottom-end"
                            :content="item.user.name"
                        >
                            {{ item.user.name }}
                        </el-tooltip>
                    </div>
                </div>
                <div class="avatar-item">
                    <div class="avatar-item-title">身份证</div>
                    <div class="avatar-item-content">
                        <el-tooltip
                            placement="bottom-end"
                            :content="item.user.id_code"
                        >
                            {{ item.user.id_code }}
                        </el-tooltip>
                    </div>
                </div>
                <div class="avatar-item">
                    <div class="avatar-item-title">手机号</div>
                    <div class="avatar-item-content">
                        <el-tooltip
                            placement="bottom-end"
                            :content="item.user.mobile"
                        >
                            {{ item.user.mobile }}
                        </el-tooltip>
                    </div>
                </div>
                <div class="avatar-item">
                    <div class="avatar-item-title">邮箱</div>
                    <div class="avatar-item-content">
                        <el-tooltip
                            placement="bottom-end"
                            :content="item.user.email"
                        >
                            {{ item.user.email }}
                        </el-tooltip>
                    </div>
                </div>
                <div class="operations">
                    <el-button @click="handlePass(item)"><el-image src="/img/通过.png" style="width:20px; height:20px; margin-right:5px;"/>通过</el-button>
                    <el-button @click="handleReject(item)"><el-image src="/img/驳回.png" style="width:20px; height:20px; margin-right:5px;"/>驳回</el-button>
                </div>
            </div>
        </div>
        <div class="title">
            专家头衔：
        </div>
        <vue3-tags-input
            :tags="item.titles"
            read-only
            class="tags-readonly"
        />
        <div class="title">
            擅长领域：
        </div>
        <vue3-tags-input
            :tags="item.level2s"
            read-only
            class="tags-readonly"
        />
        <div class="title">
            成果简介：
        </div>
        <el-input
            v-model="item.achievements"
            :rows="5"
            type="textarea"
            disabled
        />
    </el-card>
</div>
</template>

<style scoped>
.container{
    display:flex;
    flex-wrap:wrap;
}
.no-content{
    margin-top:20px;
    width:100%;
    height:50px;
    text-align: center;
    font-size:x-large;
    animation:swing 2s infinite;
}
@keyframes swing{
    20%{
        transform:rotate(5deg);
    }40%{
        transform:rotate(-5deg);
    }60%{
        transform:rotate(2deg);
    }80%{
        transform:rotate(-2deg);
    }100%{
        transform:rotate(0deg);
    }
}
.card{
    margin:20px;
    width: 380px;
}
.avatar-row{
    display:flex;
    align-items:flex-start;
}
.avatar{
    width:100px;
    height:130px;
    background:url('/img/头像.png') no-repeat center;
}
.avatar-item{
    display:flex;
    margin-left:10px;
}
.avatar-item-title{
    width:50px;
    text-align-last:justify;
    text-align:justify;
    text-justify:distribute-all-lines;
    font-weight:bolder;
}
.avatar-item-content{
    margin-left:10px;
    width:170px;
    overflow:hidden;
    text-overflow:ellipsis;
}
.operations{
    margin-left:10px;
    margin-top:5px;
    text-align:center;
}
.title{
    margin:10px 0 0 0;
    font-weight:bolder;
}
.tags-readonly{
    width:340px;
    min-height:0px;
    border:0px;
}
:deep(.v3ti-tag){
    background-color:var(--el-color-warning);
}
:deep(.v3ti-new-tag){
    display:none;
}
.el-textarea{
    width:340px;
}
:deep(.el-textarea__inner){
    color:var(--el-color-warning);
}
</style>